<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .form{
            position:absolute;
            top:20px;
            left:50%;
            transform:translate(-50%,0%);
            background-color: #909399;
            border-radius: 50px;
            border: lightskyblue solid 2px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-button type="primary" @click="openAddForm" >录入成绩</el-button>
        <template>
            <el-select v-model="filterCheckedCourseIds" :multiple="courseIdEnableMultiple" placeholder="请选择课程" @change="checkChange">
                <el-option
                        v-for="course in courses"
                        :key="course.id"
                        :label="course.name"
                        :value="course.id">
                </el-option>
            </el-select>

            <el-select
                    v-model="filterCheckedTerms"
                    :multiple="termEnableMultiple"
                    collapse-tags
                    style="margin-left: 20px;"
                    placeholder="请选择学期" @change="checkChange">
                <el-option
                        v-for="term in terms"
                        :key="term"
                        :label="term"
                        :value="term">
                </el-option>
            </el-select>
        </template>
        <template>
            <el-table
                    :data="filterScores"
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="分数id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="term"
                        label="学期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="courseCode"
                        label="课程编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="courseName"
                        label="课程名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="studentNo"
                        label="学号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="studentName"
                        label="学生"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="value"
                        label="分数"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template #default="{row}">
                        <el-button @click="editScore(row)" type="primary" icon="el-icon-edit" circle></el-button>
                        <el-button @click="deleteScore(row)" type="danger" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-form class="form" ref="form" :model="scoreModel" label-width="80px" v-show="formShow">

            <el-form-item label="课程" >
                <el-select v-model="scoreModel.courseId" placeholder="课程" :value="scoreModel.courseId" v-show="inAdd"  @change="changeCourse">
                    <el-option v-for="course in courses " :value="course.id" :label="course.name"></el-option>
                </el-select>
                <el-input v-model="scoreModel.courseName" v-show="!inAdd" disabled></el-input>
            </el-form-item>
            <el-form-item label="学期" >
                <el-select v-model="scoreModel.term" placeholder="学期" :value="scoreModel.term" v-show="inAdd" :disabled="scoreModel.courseId==null" @change="changeTerm">
                    <el-option v-for="term in optionalTerms " :value="term" :label="term"></el-option>
                </el-select>
                <el-input v-model="scoreModel.term" v-show="!inAdd" disabled></el-input>
            </el-form-item>
            <el-form-item label="学生" >
                <el-select v-model="scoreModel.studentId" placeholder="学生" :value="scoreModel.studentId" v-show="inAdd" :disabled="scoreModel.term==null">
                    <el-option v-for="student in students " :value="student.id" :label="student.firstname+student.lastname"></el-option>
                </el-select>
                <el-input v-model="scoreModel.studentName" v-show="!inAdd" disabled></el-input>
            </el-form-item>
            <el-form-item label="成绩">
                <el-input type="number" v-model="scoreModel.value"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit">完成</el-button>
                <el-button @click="closeForm">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>



<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                http_prefix:'http://localhost:8080/',
                config : {
                    headers: {'Content-Type': 'application/json;charset=UTF-8'}
                },
                courses:[],
                students:[],
                checkedCourseIds:[],
                scores:[],
                scoreModel:{},
                formShow:false,
                inAdd:false,
                terms:[],
                filterCheckedCourseIds:[],
                filterCheckedTerms:[],
                courseIdEnableMultiple:true,
                termEnableMultiple:true,
                filterScores:[],
                optionalTerms:[]
            }
        },
        methods: {
            closeForm(){
                this.formShow=false;
                this.scoreModel={};
            },
            hintMsg(msg) {
                this.$message(msg);
            },
            successMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },

            warnMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'warning'
                });
            },

            errorMsg(msg) {
                this.$message.error(msg);
            },
            async getCourseByTeacher(){
                await axios.get(this.http_prefix+"course/teacher").then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg);
                        return;
                    }
                    this.courses=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            getScoreVosByCourseIds(){
                let courseIds=[]
                if(this.checkedCourseIds.length>0)
                    courseIds=this.checkedCourseIds
                else{
                    for(let i=0;i<this.courses.length;i++)
                        courseIds.push(this.courses[i].id)
                }
                let str=courseIds.join(",")
                axios.get(this.http_prefix+"score/getScoreVosByCourseIds/"+str).then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.successMsg(resp.data.msg)
                        return;
                    }
                    this.scores=resp.data.data
                    this.checkChange()
                    console.log(this.scores)
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            getStudentByCourseId(){
                let courseIds=[]
                if(this.checkedCourseIds.length>0)
                    courseIds=this.checkedCourseIds
                else{
                    for(let i=0;i<this.courses.length;i++)
                        courseIds.push(this.courses[i].id)
                }
                let str=courseIds.join(",")
                axios.get(this.http_prefix+"student/getStudentTeacherVoByCourseIds/"+str).then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg);
                        return;
                    }
                    this.students=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            editScore(row){
                this.inAdd=false
                this.formShow=true
                this.scoreModel={...row}
            },
            submit(){
                if(this.scoreModel.id==null)
                    this.addScore()
                else this.updateScore()
                this.closeForm()
            },
            updateScore(){
                console.log(this.scoreModel)
                axios.put(this.http_prefix+"score",JSON.stringify(this.scoreModel),this.config).then(resp=>{
                  if(resp.data.code!=1)
                  {
                      this.errorMsg(resp.data.msg);
                      return;
                  }
                  this.successMsg(resp.data.msg)
                  this.getScoreVosByCourseIds()
              }).catch(err=>{
                  this.errorMsg(err.message)
              })
            },
            deleteScore(row){
                axios.delete(this.http_prefix+"score/"+row.id).then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg);
                        return;
                    }
                    this.successMsg(resp.data.msg)
                    this.getScoreVosByCourseIds()
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            addScore(){
              axios.post(this.http_prefix+"score",JSON.stringify(this.scoreModel),this.config).then(resp=>{
                  if(resp.data.code!=1)
                  {
                      this.errorMsg(resp.data.msg);
                      return;
                  }
                  this.successMsg(resp.data.msg)
                  this.getScoreVosByCourseIds()
              }).catch(err=>{
                  this.errorMsg(err.message)
              })
            },
            openAddForm(){
              this.inAdd=true
              this.formShow=true
              this.getCourseByTeacher()
            },
            changeCourse(){
                  this.getOptionalTerms()
            },
            changeTerm(){
                this.getNotScoreStudentsByCourseIdAndTerm()
            },
            getOptionalTerms()
            {
                axios.get(this.http_prefix+"score/getOptionalTermsByCourseId/"+this.scoreModel.courseId).then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg);
                        return;
                    }
                    this.optionalTerms=resp.data.data
                },err=>{
                    this.errorMsg(err.message)
                })
            },
            getNotScoreStudentsByCourseIdAndTerm()
            {
                const params={
                    courseId:this.scoreModel.courseId,
                    term:this.scoreModel.term
                }
                axios.get(this.http_prefix+"student/getNotScoreStudentsByCourseIdAndTerm",{params}).then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg);
                        return;
                    }
                    this.students=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            getNotScoreStudentsByCourseId(){
              axios.get(this.http_prefix+"student/getNotScoreStudentsByCourseId/"+this.scoreModel.courseId).then(resp=>{
                  if(resp.data.code!=1)
                  {
                      this.errorMsg(resp.data.msg);
                      return;
                  }
                  this.students=resp.data.data
              }).catch(err=>{
                  this.errorMsg(err.message)
              })
            },
            async getTerms(){
                await axios.get(this.http_prefix+"/courseStudent/terms").then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg)
                        return;
                    }
                    this.terms=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            checkChange(){
                let scores=this.scores
                if(this.filterCheckedCourseIds.length>1)
                    this.termEnableMultiple=false
                else
                    this.termEnableMultiple=true

                if(this.filterCheckedTerms.length>1)
                    this.courseIdEnableMultiple=false
                else
                    this.courseIdEnableMultiple=true

                if(this.filterCheckedCourseIds.length>0)
                    scores=scores.filter(score=>this.filterCheckedCourseIds.indexOf(score.courseId)!=-1)
                if(this.filterCheckedTerms.length>0)
                    scores=scores.filter(score=>this.filterCheckedTerms.indexOf(score.term)!=-1)
                this.filterScores=scores
                // console.log("termEnableMultiple: "+this.termEnableMultiple)
                // console.log("courseIdEnableMultiple: "+this.courseIdEnableMultiple)
                //
                // console.log("filterCheckedTerms: "+this.filterCheckedTerms)
                // console.log("filterCheckedCourseIds: "+this.filterCheckedCourseIds)
            },
            init(){
                this.getCourseByTeacher().then(resp=>{
                    this.getTerms().then(resp=>{
                        this.getScoreVosByCourseIds()
                    })
                })
            }
        },
        mounted() {
            this.init()
        }

    })
</script>
</html>